<template>
  <div>
    <div class="app-container calendar-list-container">
      <el-form label-position="left" label-width="100px">
        <el-row>
          <el-col :span="24">
            <a @click="back()">
              <span class="back-link"><svg-icon icon-class="ds-left-double-arrow" /> 返回</span>
            </a>
          </el-col>
          <el-col :span="24">
            <span class="viewTitle">查看课程</span>
          </el-col>
          <el-col :span="11">
            <el-card class="box-card">
              <p class="form-header">
                <svg-icon icon-class="ds-person" />基础信息
              </p>
              <el-form-item label="名称">
                {{list.base_info.title}}
              </el-form-item>
              <el-form-item label="课程分类">
                {{list.base_info.essay_class.name}}
              </el-form-item>
              <el-form-item label="阶段">
                {{courseMoment}}
              </el-form-item>
            </el-card>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-card class="box-card">
              <p class="form-header">
                <svg-icon icon-class="ds-person" />推送规则
              </p>
              <el-form-item label="状态">
                {{list.send_rule.status_text}}
              </el-form-item>
              <el-form-item label="缩略图">
                <span style="color:#ed8a94;cursor:pointer;" @click="showBanner">点击查看</span>
              </el-form-item>
              <el-form-item label="推送时间">
                {{sendTime}}
              </el-form-item>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div class="tabs-content">
        <el-tabs type="border-card">
          <el-tab-pane class="background-grey">
            <span slot="label">图文</span>
            <div>
              <div class="essayContent" v-html="list.essay_content"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="测试题">
            <div style="padding:15px;">
              <div v-if="list.essay_qu.length === 0">
                <span class="empty-test">无测试题</span>
              </div>
              <div v-else class="question-item" v-for="(item,index) in list.essay_qu" :key="index">
                <div class="title">
                  <p><span>{{index+1}}、</span>{{item.qu_title}}</p>
                </div>
                <div class="clearfix">
                  <div class="answer">
                    <div class="div-1">答案：</div>
                    <div class="div-2">
                      <p v-for="(answer,number) in item.answer" :key="number" class="clearfix" :class="answer.is_right === '1'?'back-white':''">
                        <span class="span-1">{{answer.select_num}}</span>
                        <span class="span-2">{{answer.test_answer}}</span>
                        <span class="span-3" v-if="answer.is_right === '1'"><i class="el-icon-check"></i></span>
                      </p>
                    </div>
                  </div>
                  <div class="description">
                    <div class="div-1">解析：</div>
                    <div class="div-2">{{item.analyze}}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="mask" v-show="bannerFlag" @click="cancelBanner">
      <div>
        <img :src="banner" alt="">
      </div>
    </div>
  </div>
</template>
<style scoped>
  .back-link {
    display: block;
    padding: 0px 0 15px;
  }
  .normal-person {
    color: #4ebef6;
  }
  .high-person {
    color: #fc9336;
  }
  .text {
    font-size: 14px;
  }
  .box-card .el-form-item {
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item:last-child {
    border: none;
  }
  .box-card .el-form-item .el-row {
    line-height: 50px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item .el-row:last-child {
    border: none;
  }
  .update-pass {
    float: right;
    font-size: 14px;
    font-weight: normal;
    color: #ff7357;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .pdl10 {
    padding-left: 10px;
  }
  .form-header {
    /* padding-left: 10px; */
    color: #606266;
    font-weight: 700;
  }
  .form-header svg {
    color: #ed8a94;
    font-size: 20px;
    margin-right: 10px;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .clearfix:after {
    clear: both
  }
  .el-card__header {
    background-color: #4fb1e2;
    color: #ffffff;
    line-height: 58px;
    padding: 0 10px 0 20px;
  }
  .el-card__header button {
    color: #ffffff;
    float: right;
    padding: 3px 0;
    margin: 15px 10px;
  }
  .el-card__header button i {
    font-size: 20px;
  }
  .el-card__header svg {
    font-size: 28px;
    float: right;
    padding: 3px 0;
    margin: 15px 5px;
    cursor: pointer;
  }
  .el-col:nth-child(3n){
    clear: right;
  }
  .back-link {
    color: #ed8a94;
    font-size: 14px;
  }
  .back-link svg {
    font-size: 12px;
  }
  .el-transfer-panel__body {
    height: 203px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 149px;
  }
  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
  }
  .el-col {
    margin-bottom: 0px!important;
  }
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: 0!important;
    margin-right: 10px;
  }
  span.viewTitle{
    display: block;
    font-size:22px;
    margin:10px 0 30px 0;
    color:#4d4d4d;
  }
  .tabs-content{
    margin-top:50px;
  }
  .tabs-content .essayContent{
    width:800px;
    margin:0 auto;
    background:#fff;
    padding:20px 30px 0;
  }
  .tabs-content .question-item{
    padding:10px 30px 30px;
    border-bottom:1px solid #e6e6e6;
  }
  .tabs-content .question-item:last-of-type{
    border-bottom:0;
  }
  .question-item .title{
    font-size:16px;
    margin-top:30px;
  }
  .tabs-content .answer{
    width:50%;
    float:left;
    position:relative;
  }
  .tabs-content .description{
    width:50%;
    float:left;
    position:relative;
  }
  .answer .div-1{
    width:50px;
    display: inline-block;
    position:absolute;
    top:18px;
  }
  .description .div-1{
    width:50px;
    display: inline-block;
    color:#999;
    position:absolute;
    top:16px;
  }
  .description .div-2{
    width:93%;
    display: inline-block;
    margin-left:50px;
    font-size:14px;
    color:#999;
    margin-top:12px;
    line-height:22px;
  }
  .answer .div-2{
    width: 88%;
    display: inline-block;
    margin-left:50px;
  }
  .div-2 p span{
    display: inline-block;
    font-size:14px;
  }
  .div-2 p .span-1{
    float:left;
    width:50px;
    position:relative;
    top:3px;
  }
  .div-2 p .span-2{
    float:left;
    width:80%;
    line-height:22px;
  }
  .div-2 p .span-3{
    float:right;
    position:relative;
    top:3px;
  }
  .background-grey{
    background:#fafafa;
  }
  .back-white{
    background:#fafafa;
  }
  .tabs-content >>> .el-tabs--border-card>.el-tabs__content{
    padding:0!important;
  }
  .empty-test{
    display: block;
    margin:30px auto;
    text-align: center;
  }
  .mask{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    position:fixed;
    top:0;
    bottom:0;
    z-index:999;
  }
  .mask img{
    width:200px;
    height:200px;
    position:fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%)
  }
  .overHide{
    overflow:hidden;
  }
</style>
<script>
  import { essayDetail } from '@/api/science'
  export default {
    data() {
      return {
        id: '',
        list: {
          'base_info': {
            'essay_class': {
              'id': '',
              'name': ''
            }
          },
          'send_rule': {},
          'essay_content': null,
          'essay_qu': {}
        },
        banner: '',
        bannerFlag: false,
        courseMoment: '',
        sendTime: ''
      }
    },
    created() {
      this.id = this.$route.params.id
      this.initData()
    },
    methods: {
      // 初始化数据 查看课程详情
      initData() {
        essayDetail({ id: this.id }).then(response => {
          this.list = response.data
          this.banner = response.data.send_rule.banner
          this.courseMoment = ''
          for (var item of this.list.base_info.stage) {
            this.courseMoment += item.level_3_name + '-' + item.level_4_name + '、'
          }
          this.courseMoment = this.courseMoment.substring(0, this.courseMoment.length - 1)
          this.sendTime = ''
          for (var time of this.list.send_rule.send_time) {
            this.sendTime += '孕' + time.week + '周'
            if (time.day !== 0) {
              this.sendTime += '，孕' + time.day + '天、'
            } else {
              this.sendTime += '、'
            }
          }
          this.sendTime = this.sendTime.substring(0, this.sendTime.length - 1)
        })
      },
      back() {
        window.history.go(-1)
      },
      // 点击查看
      showBanner() {
        if (this.banner !== '') {
          this.bannerFlag = true
          document.body.style.overflow = 'hidden'
        } else {
          this.$message.warning('当前课程没有缩略图')
        }
      },
      cancelBanner() {
        this.bannerFlag = false
        document.body.style.overflow = ''
      }
    }
  }
</script>
